<template>
	<div class="zh-register">
		<nav-header></nav-header>
		<div class="zh-register-content">
			<div class="zh-registration-message">注册信息</div>
			<ul class="zh-registration-ul">
				<li>
					<div class="register_left">系统版本</div>
					<div class="register_center">{{systemVersion}}</div>
				</li>
				<li>
					<div class="register_left">机器码</div>
					<div class="register_center">{{machineCode}}</div>
					<el-button type="primary">点击复制</el-button>
				</li>
				<li>
					<div class="register_left">激活码</div>
					<div class="register_center">
						<el-input v-model="input" placeholder="请输入激活码" clearable></el-input>
					</div>
					<el-button type="primary">立即激活</el-button>
				</li>
			</ul>
			<div class="zh-registration-message">授权模块</div>
			<ul class="zh-registration-ul">
				<li class="zh-registration-li">
					<div class="register_right">
						
					</div>
					<div class="register_left">
						<div class="register_content">
							<div>状态</div>
							<div>注册日期</div>
							<div>有效期至</div>
							<div>序列号</div>
						</div>
					</div>
					<div class="register_center">
						<div class="register_content">
							<div><span style="color: #0fcc99;">{{registrationStatus}}</span>（无限期）</div>
							<div>{{registrationDate}}</div>
							<div>{{registrationDate}}（永久）</div>
							<div>{{input2}}</div>
						</div>
					</div>
				</li>
				<li class="zh-registration-li">
					<div class="register_right">
						
					</div>
					<div class="register_left">
						<div class="register_content">
							<div>状态</div>
							<div>注册日期</div>
							<div>有效期至</div>
						</div>
					</div>
					<div class="register_center">
						<div class="register_content">
							<div><span style="color: #0fcc99;">{{registrationStatus}}</span>（无限期）</div>
							<div>{{registrationDate}}</div>
							<div>{{registrationDate}}（永久）</div>
						</div>
					</div>
				</li>
				<li class="zh-registration-li">
					<div class="register_right">
						
					</div>
					<div class="register_left">
						<div class="register_content">
							<div>状态</div>
							<div>注册日期</div>
							<div>有效期至</div>
						</div>
					</div>
					<div class="register_center">
						<div class="register_content">
							<div><span style="color: #0fcc99;">{{registrationStatus}}</span>（无限期）</div>
							<div>{{registrationDate}}</div>
							<div>{{registrationDate}}（永久）</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
	    data() {
		    return {
		        systemVersion: "教育云平台单机版 V3.0",
		        machineCode: "73604E90-E3B9-18DB-0F27-7F77C8ADC65B",
		        input: "",
		        registrationDate: "2018-05-08",
		        registrationStatus: "已注册",
		        input2: "73604E90-E3B9-18DB-0F27-7F77C8ADC65B",
		    }
		},
		methods: {
		    
		},
  	}
</script>
<style lang="scss">
	.zh-register {
		.zh-register-content {
			width: 800px;
			.zh-registration-message {
				margin-top: 20px;
			    font-weight: 600;
			    height: 60px;
			    line-height: 60px;
			    border-bottom: 1px solid #e6e6e6;
			}
			.zh-registration-ul {
				li {
					padding: 10px 0;
					border-bottom: 1px solid #e6e6e6;
				}
				.zh-registration-li {
					padding: 20px 0;
				}
			}
			.register_left,.register_center,.register_right {
				display: inline-block;
				vertical-align: middle;
			}
			.register_left {
				width: 140px;
			}
			.register_center {
				width: 400px;
				margin-right: 10px;
			}
			.register_right {
				width: 80px;
				height: 84px;
				margin: 0 80px 0 60px;
				background: red;
			}
			.register_content {
				>div {
					height: 30px;
					line-height: 30px;
				}
			}

		}
	}
</style>